<script>
import {translate_zh_en_ru} from "@/components/utils/useUtils";
import translate_large_model from "@/components/utils/translate_large_model";

export default {
  name: "textTranslate",
  props: {
    // 正确写法：指定 type
    languageS: {
      type: String,  // 必须是构造函数
      default: ''    // 默认值可选
    },
    // 正确写法：对象类型的 prop
    richTextTranslateData: {
      type: Object,  // 必须是构造函数
      default: () => ({  // 对象/数组默认值必须用函数返回
        zh: '',
        en: '',
        ru: ''
      })
    }
  },
  data() {
    return {
      //忙加载的控制变量
      loading:false,
      //弹窗标题的变量
      titleMessage:'',
      //本地的变量
      localRichTextTranslateData:this.richTextTranslateData,
      //设置语言
      tabs_chinese:'中文',
      tabs_english:'英文',
      tabs_russian:'俄文',

      main:{
        wait:'翻译中...请稍后'
      },

      //控制显示用了那个翻译
      sucAiData:0,
      sucData:0,

      //提示翻译的弹窗
      dialogVisible:false
    }
  },
  watch: {
    localRichTextTranslateData: {
      handler(newVal) {
        //对于没有填写的，给一个预设值
        this.$emit('content-change', newVal);
      },
      deep: true, // 关键：开启深度监听
    }
  },
  methods:{
    //doe：1.代表普通普通翻译；2.代表Ai翻译
    translate(doe){
      // 翻译前禁用所有编辑器
      this.loading=true

      let languageFull=0
      let languageText=''
      if (this.localRichTextTranslateData.zh!=='' && this.localRichTextTranslateData.zh!==null && this.localRichTextTranslateData.zh!==undefined){
        languageFull=languageFull+1
        languageText=languageText+'zh'
      }
      if (this.localRichTextTranslateData.en!=='' && this.localRichTextTranslateData.en!==null && this.richTextTranslateData.en!==undefined){
        languageFull=languageFull+1
        languageText=languageText+'en'
      }
      if (this.localRichTextTranslateData.ru!=='' && this.localRichTextTranslateData.ru!==null && this.richTextTranslateData.ru!==undefined){
        languageFull=languageFull+1
        languageText=languageText+'ru'
      }
      if (languageFull===0){
        if (this.languageS==='chinese'){
          this.$message.error('请输入一种语言')
        }
        else if (this.languageS==='english'){
          this.$message.error('Please enter a language')
        }
        else if (this.languageS==='russian'){
          this.$message.error('Пожалуйста, введите язык')
        }
        return
      }
      if (languageFull===3){
        if (this.languageS==='chinese'){
          this.$message.error('请清空至少一种语言后进行翻译')
        }
        else if (this.languageS==='english'){
          this.$message.error('Please clear at least one language before translating')
        }
        else if (this.languageS==='russian'){
          this.$message.error('Пожалуйста, очистите хотя бы один язык перед переводом')
        }
        return;
      }
      if (this.languageS==='chinese'){
        this.titleMessage='翻译中'
      }
      else if (this.languageS==='english'){
        this.titleMessage='Translating'
      }
      else if (this.languageS==='russian'){
        this.titleMessage='Перевод'
      }
      this.dialogVisible=true
      //是普通翻译
      if (doe===1){
        if (languageText.includes('zh')){
          translate_zh_en_ru(this.localRichTextTranslateData.zh,'zh',1).then(data=>{
            this.localRichTextTranslateData.en=data.en
            this.localRichTextTranslateData.ru=data.ru
            // 翻译完成后启用
            this.sucData=1
            this.sucAiData=0
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (languageText.includes('en')){
          translate_zh_en_ru(this.localRichTextTranslateData.en, 'en', 1).then(data => {
            this.localRichTextTranslateData.zh=data.zh
            this.localRichTextTranslateData.ru=data.ru
            // 翻译完成后启用
            this.sucData=1
            this.sucAiData=0
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (languageText.includes('ru')){
          translate_zh_en_ru(this.localRichTextTranslateData.ru, 'ru', 1).then(data => {
            this.localRichTextTranslateData.zh=data.zh
            this.localRichTextTranslateData.en=data.en
            // 翻译完成后启用
            this.sucData=1
            this.sucAiData=0
            this.loading=false
            this.dialogVisible=false
          })
        }
      }
      //是用AI大模型翻译
      if (doe===2){
        if (languageText.includes('zh')){
          translate_large_model(this.localRichTextTranslateData.zh,'zh',1).then(data=>{
            this.localRichTextTranslateData.en=data.en
            this.localRichTextTranslateData.ru=data.ru
            // 翻译完成后启用
            this.sucData=0
            this.sucAiData=1
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (languageText.includes('en')){
          translate_large_model(this.localRichTextTranslateData.en, 'en', 1).then(data => {
            this.localRichTextTranslateData.zh=data.zh
            this.localRichTextTranslateData.ru=data.ru
            // 翻译完成后启用
            this.sucData=0
            this.sucAiData=1
            this.loading=false
            this.dialogVisible=false
          })
        }
        else if (languageText.includes('ru')){
          translate_large_model(this.localRichTextTranslateData.ru, 'ru', 1).then(data => {
            this.localRichTextTranslateData.zh=data.zh
            this.localRichTextTranslateData.en=data.en
            // 翻译完成后启用
            this.sucData=0
            this.sucAiData=1
            this.loading=false
            this.dialogVisible=false
          })
        }
      }
    },
  },
  mounted() {
    //设置语言：
    if (this.languageS==='chinese'){
      this.tabs_chinese='中文'
      this.tabs_english='英文'
      this.tabs_russian='俄文'
      this.main.wait='翻译中...请稍后'
    }
    else if (this.languageS==='english'){
      this.tabs_chinese='Chinese'
      this.tabs_english='English'
      this.tabs_russian='Russian'
      this.main.wait='Translating...Please wait a moment'
    }
    else if (this.languageS==='russian'){
      this.tabs_chinese='Kитайский'
      this.tabs_english='Aнглийский'
      this.tabs_russian='Pусский'
      this.main.wait='Перевод...Пожалуйста, подождите минутку'
    }
    this.localRichTextTranslateData=this.richTextTranslateData
  }
}
</script>
<template>
  <div>
    <div>
      <div>
        <div>
          <span>{{tabs_chinese}}</span>
        </div>
        <el-input style="width: 100%;" v-model="localRichTextTranslateData.zh"></el-input>
      </div>
      <div>
        <div>
          <span>{{tabs_english}}</span>
        </div>
        <el-input style="width: 100%;" v-model="localRichTextTranslateData.en"></el-input>
      </div>
      <div>
        <div>
          <span>{{tabs_russian}}</span>
        </div>
        <el-input style="width: 100%;" v-model="localRichTextTranslateData.ru"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: right">

        <el-button type="info" icon="el-icon-check" circle size="mini" v-if="sucData===0"></el-button>
        <el-button type="success" icon="el-icon-check" circle size="mini" v-if="sucData===1"></el-button>
        <el-button @click="translate(1)" size="small" style="width: 200px">翻译|Translate|Перевод</el-button>

        <el-button type="info" icon="el-icon-check" circle size="mini" v-if="sucAiData===0"></el-button>
        <el-button type="success" icon="el-icon-check" circle size="mini" v-if="sucAiData===1"></el-button>
        <el-button @click="translate(2)" size="small" style="width: 210px">AI翻译|AI Translation|AI Перевода</el-button>
      </div>
    </div>

    <!--翻译的弹窗-->
    <el-dialog
        :title="titleMessage"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
        append-to-body>
      <span>{{main.wait}}</span>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>